<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增预算材料总计划')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-plan-add" th:object="${pId}">
            <div class="form-group">
                <label class="col-sm-3 control-label">材料类型：</label>
                <div class="col-sm-8">
                    <select onchange="sb1(this)" id="matType" name="matType" class="form-control" type="text" ></select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">材料分类：</label>
                <div class="col-sm-8">
                    <select onchange="sb2(this)" id="matClassification" name="matClassification" class="form-control" type="text"></select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">材料数据：</label>
                <div class="col-sm-8">
                    <select onchange="sb3(this)" id="matData" name="matData" class="form-control" type="text"></select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">材料详情：</label>
                <div class="col-sm-8">
                    <select onchange="sb4(this)" id="matDetails" name="matDetails" class="form-control" type="text"></select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">总览：</label>
                <div class="col-sm-8">
                    <input id="a" name="a" class="form-control" type="text"></input>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">材料数量：</label>
                <div class="col-sm-8">
                    <input name="matNumber" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group" hidden>
                <label class="col-sm-3 control-label">项目外键：</label>
                <div class="col-sm-8">
                    <input name="mId" class="form-control" type="text" th:value="${pId}">
                </div>
            </div>
            <div class="form-group" hidden>
                <label class="col-sm-3 control-label">采购数量：</label>
                <div class="col-sm-8">
                    <input name="mMolecule" class="form-control" type="text">
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script type="text/javascript">
        var prefix = ctx + "ruoyi/plan"
        $("#form-plan-add").validate({
            focusCleanup: true,
        });
        s()
        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-plan-add').serialize());

            }
        }
        //jq监听  材料类型
        function s() {
            var a = "请选择材料类型"
            $.ajax({
                url: prefix + "/plans",
                type: "get",
                dataType:"json",
                data: {},
                success: function(data){

                    if(data.length>0){
                        $("#matType").append("<option>"+ a +"</option>")
                        for(i in data){
                            $("#matType").append("<option>"+data[i].matName+"</option>")
                        }
                    }else{
                        $("#matType").append("<option>暂无数据</option>")
                    }
                },
            })}

            //jq监听根据材料类型显示出材料数据
            function sb1(obj) {
             var aname = $(obj).val();
             $("#matClassification").html("");
             var a = "请选择材料分类"
                $.ajax({
                    url: prefix + "/classmat/" + aname,
                    type: "get",
                    dataType:"json",
                    data: {},
                    success: function(data){
                        $("#matData").empty("");
                        if(data.length>0){
                            $("#matClassification").append("<option>"+ a +"</option>")
                            for(i in data){
                                $("#matClassification").append("<option>"+data[i].matClassificationName+"</option>")
                            }
                        }else{
                            $("#matClassification").append("<option>暂无数据</option>")
                        }
                    },
                })}


        function sb2(aaa) {
            var pname = $(aaa).val();
            $("#matData").html("");
            var a = "请选择材料数据"
            $.ajax({
                url: prefix + "/like/"+ pname,
                type: "get",
                dataType:"json",
                data: {},
                success: function(data){
                    $("#matDetails").empty();
                    $("#matData").empty();
                    if(data.length>0){
                        $("#matData").append("<option>"+ a +"</option>")
                        for(i in data){
                            $("#matData").append("<option>"+data[i].matDataName+"</option>")
                        }
                    }else{
                        $("#matData").append("<option>暂无数据</option>")
                    }
                },
            })}

        function sb3(bbb) {
            var dname = $(bbb).val();
            $("#matDetails").html("");
            var a = "请选择材料详情"
            $.ajax({
                url: prefix + "/love/"+ dname,
                type: "get",
                dataType:"json",
                data: {},
                success: function(data){
                    $("#matDetails").empty();
                    if(data.length>0){
                        $("#matDetails").append("<option>"+ a +"</option>")
                        for(i in data){
                            $("#matDetails").append("<option>"+data[i].matDetailsName+"</option>")
                        }
                    }else{
                        $("#matDetails").append("<option>暂无数据</option>")
                    }
                },
            })}

            function sb4() {
                var matType = $("#matType option:selected").text();
                var matClassification = $("#matClassification option:selected").text();
                var matData = $("#matData option:selected").text();
                var matDetails = $("#matDetails option:selected").text();
                var zonglan = matType + "-" + matClassification + "-" + matData + "-" +matDetails
                $("#a").val(zonglan);
            }
    </script>
</body>
</html>